<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增证书申请')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <h4 class="form-header h4">证书申请</h4>
        <form class="form-horizontal m" style="width: 800px;" id="form-apply-add">
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group" style="display: flex;">
                        <label class=" control-label is-required" style="text-align: left;">加密算法：</label>
                        <div class="">
                            <div style="display: flex; cursor: pointer;">
                                <div id="privateKeyType1" class="inputDiv sed" onclick="removeClassFun('#privateKeyType2', '#privateKeyType1')">
                                    RSA
                                </div>
                                <div id="privateKeyType2" class="inputDiv" onclick="removeClassFun('#privateKeyType1', '#privateKeyType2')">
                                    ECC
                                </div>
                            </div>
                            <input id="privateKeyType" name="privateKeyType" class="form-control" type="hidden">
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group" style="display: flex;">
                        <label class="control-label is-required" style="text-align: left;">证书类型：</label>
                        <div class="">
                            <div style="display: flex; cursor: pointer;">
                                <div id="isUniversal1" class="inputDiv sed" onclick="removeClassFun('#isUniversal2','#isUniversal1')">
                                    普通证书
                                </div>
                                <div id="isUniversal2" class="inputDiv" onclick="removeClassFun('#isUniversal1','#isUniversal2')">
                                    通配符证书
                                </div>
                            </div>
                            <input id="isUniversal" name="isUniversal" class="form-control" type="hidden">
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group" style="display: flex;">
                        <label class="control-label is-required" style="text-align: left;">颁发机构：</label>
                        <div class="">
                            <div style="display: flex; cursor: pointer;">
                                <div class="inputDiv sed" id="issuingAuthority1" onclick="removeClassFun('#issuingAuthority2', '#issuingAuthority3', '#issuingAuthority1')">
                                    <div style="width: 130px; height: 35px;">
                                        <img th:src="@{/img/letsencrypt.png}"  alt="Let's Encrypt" style="width: 100%; height: 100%;"/>
                                    </div>
                                    Let's EncryptSSL
                                </div>
                                <div class="inputDiv" id="issuingAuthority2" onclick="removeClassFun('#issuingAuthority1', '#issuingAuthority3', '#issuingAuthority2')">
                                    <div style="width: 130px; height: 35px;">
                                        <img th:src="@{/img/google.png}"  alt="Let's Encrypt" style="width: 95px; height: 32px;"/>
                                    </div>
                                    GoogleSSL
                                </div>
                                <div class="inputDiv" id="issuingAuthority3" onclick="removeClassFun('#issuingAuthority1','#issuingAuthority2','#issuingAuthority3')">
                                    <div style="width: 130px; height: 35px;">
                                        <img th:src="@{/img/zerossl.png}"  alt="Let's Encrypt" style="width: 100%; height: 100%;"/>
                                    </div>
                                    ZeroSSL
                                </div>
                            </div>
                            <input id="issuingAuthority" name="issuingAuthority" class="form-control" type="hidden">
                            <span class="help-block m-b-none">建议使用：Let's Encrypt厂商提供的证书</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group" style="display: flex;">
                        <label class="control-label is-required" style="text-align: left;">证书域名：</label>
                        <div style="width: 500px;">
                            <input style="outline:none;" id="certificateDomain" name="certificateDomain" placeholder="请输入证书域名" class="form-control" type="text" required>
                            <span id="domainError" class="help-block m-b-none" style="color: red; visibility: hidden;"><i class="fa fa-info-circle"></i>域名格式不正确，域名字符包含a--z、A--Z、0--9、'-' 、'_' 、'.'、'*'、'@'、'中文汉字'。</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group">
                        <p class="is-required"><text style="color: red;">*</text>&nbsp;请配置以下DNS解析记录(配置成功后，<text style="color: red; font-weight: bold;font-size: 18px;">请勿删除记录</text> )不删除解析记录，自动续签就可以免验证。</p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 88px;">状态</th>
                                        <th style="width: 238px;">主机记录</th>
                                        <th style="width: 88px;">记录类型</th>
                                        <th style="width: 388px;">记录值</th>
                                    </tr>
                                </thead >
                                <tbody id="tableBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group" style="display: flex;">
                        <label class="control-label" style="text-align: left;">备注描述：</label>
                        <div style="width: 500px;">
                            <textarea name="remark" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-paper-plane"></i>验证域名</button>
                    <button type="button" class="btn btn-sm btn-warning" onclick="formReset()"><i class="fa fa-refresh"></i>&nbsp;重置表单</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关闭申请</button>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "SSL/apply"
        $("#form-apply-add").validate({
            focusCleanup: true
        });
        //填写域名信息得校验方法
        function validateInput(event) {
            // 获取输入框的值
            const inputValue = event.target.value;
            // 定义正则表达式（注意：在JavaScript中，我们需要使用Unicode范围来匹配中文汉字）
            const regex = /^[a-zA-Z0-9\-_\.\*@\u4e00-\u9fa5]+$/;
            // 检查输入值是否符合正则表达式
            if (regex.test(inputValue)) {
                // 合法输入，可以执行一些操作，比如显示一个绿色的勾号
                event.target.style.borderColor = '#12B980';
                //隐藏提示
                $("#domainError").css('visibility', 'hidden');
            } else {
                // 非法输入，可以执行一些操作，比如显示一个红色的叉号或清除非法字符
                event.target.style.borderColor = 'red';
                // 清除输入值
                event.target.value = ''; // 删除最后一个字符（不推荐在生产环境中这样做）
                //显示提示值
                $("#domainError").css('visibility', 'visible');
            }
        }
        // 当页面加载完成后，为输入框绑定onkeyup事件
        window.onload = function() {
            const inputElement = document.getElementById('certificateDomain');
            inputElement.onkeyup = validateInput;
        };
        //设置默认值
        $(function() {
            $("#privateKeyType").val("RSA");
            $("#isUniversal").val("N");
            $("#issuingAuthority").val("LetsEncryptSSL");
            //监听值的变化
            $("#privateKeyType1").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#privateKeyType").val("RSA");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })
            $("#privateKeyType2").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#privateKeyType").val("ECC");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })

            $("#isUniversal1").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#isUniversal").val("N");
                    $("#certificateDomain").attr("placeholder", "请输入您的证书域名");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })
            $("#isUniversal2").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#isUniversal").val("Y");
                    $("#certificateDomain").attr("placeholder", "格式举例：【*.domain.com或*.aa.domain.com】");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })

            $("#issuingAuthority1").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#issuingAuthority").val("LetsEncryptSSL");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })
            $("#issuingAuthority2").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#issuingAuthority").val("GoogleSSL");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })
            $("#issuingAuthority3").click(function (){
                var domainTxt = $("#certificateDomain").val();
                if(!domainTxt){
                    $("#issuingAuthority").val("ZeroSSL");
                }else{
                    $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
                }
            })
            //监听域名input发生变化
            $("#certificateDomain").change(function (e){
                $.modal.loading("数据校验中，请稍后....");
                $.ajax({
                    url: prefix + "/applyBefore?domainName="+ e.target.value,
                    type: 'get',
                    success:function (res){
                        $.modal.closeLoading();
                        if(res.code === 0){
                            $("#tableBody").append("<tr>" +
                                "<td id='yzStatus'>未验证</td>" +
                                "<td>"+res.data.rrVal+"<i onclick='copyToClipboard(\"" + res.data.rrVal + "\")' class='fa fa fa-clone'></i></td>" +
                                "<td style='color: red; font-weight: bold;'>CNAME</td>" +
                                "<td>"+res.data.value+"<i onclick='copyToClipboard(\"" + res.data.value + "\")' class='fa fa fa-clone'></i></td>" +
                                "</tr>")
                            $("#certificateDomain").attr("disabled", true);
                            //定时检查是否意见添加解析
                        }else{
                            $.modal.msgError(res.msg);
                        }
                    },
                    field:function (error){
                        $.modal.closeLoading();
                    }
                })
            })
        })
        //复制数据
        function copyToClipboard(text) {
            var textarea = document.createElement('textarea');
            textarea.style.position = 'fixed';
            textarea.style.opacity = 0;
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            $.modal.msgSuccess("复制成功！");
        }
        //效果展示
        function removeClassFun(id1, id2, id3){
            var domainTxt = $("#certificateDomain").val();
            if(!domainTxt){
                if(id3){
                    $(id1).removeClass("sed");
                    $(id2).removeClass("sed");
                    $(id3).addClass("sed");
                }else{
                    $(id1).removeClass("sed");
                    $(id2).addClass("sed");
                }
            }else{
                $.modal.msgWarning("当前状态不允许更换属性，请先完成验证或取消此次申请，重新发起！");
            }
        }
        //重置表单的方法
        function formReset(){
            $("#certificateDomain").val('');
            $("#certificateDomain").attr("disabled", false);
            $("#tableBody").html('');
            $("#privateKeyType1").click();
            $("#isUniversal1").click();
            $("#issuingAuthority1").click();
        }
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.saveModal(prefix + "/add", $('#form-apply-add').serializeArray(),function (res){
                    $.modal.closeLoading();
                    if(res.code === 0){
                        //关闭
                        $.modal.openTab('证书列表', prefix, true);
                    }
                });
            }
        }
    </script>
</body>
<style type="text/css">
    .inputDiv{border: solid 2px #E4E4E7;align-content: center; text-align: center; padding: 5px 18px;position: relative; border-radius: 5px; margin-right: 5px;}
    .sed{border-color: #12B980; color: #12B980;}
</style>
</html>
